<template>
	<view class="login" @touchmove.stop.prevent="">
		<view class="login-content">
			<view class="login-content-header" style="padding-top: 10px;" @click="goback()">
				<image class="login-content-header-close" src="https://x.bilinmeiju.com/static/denglu/close.png" mode=""></image>
			</view>
			<view class="login-content-box">
				<view class="login-content-box-phone">
					获取验证码
				</view>
				
				<view class="login-content-box-input" style="margin-bottom: 15px;">
					已发送4位验证码至 &nbsp; +86 {{phone}}
				</view>
				<view class="codeinput">
					<u-code-input mode="box" v-model="code" :maxlength="4" size="40" />
				</view>

				
				<view @click="login" class="login-content-box-button active">
					确定
				</view>

				<!-- <view class="login-content-box-wechat">
					登录即表示同意<text>《隐私保护声明》</text>和<text>《用户使用协议》</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yzm:'',
				phone:'',
				code:'',
				top:0,
				handle:''
			};
		},
		onLoad(e) {
			this.phone = e.phone,
			this.handle = e.handle
			var oldphone = uni.getStorageSync('oldphone');
			var date = new Date();
			var now = date.getTime()
			
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.top = menuButtonInfo.top * 1+10
			if(this.phone!=oldphone&&this.phone) {
				this.sendcode();
				return false;
			}
			if(now-this.handle>1000*60) thia.sendcode();
		},
		components: {  
		    },
		methods:{
			login(){
				this.$post('api/phonelogin',{phone:this.phone,code:this.code,openid:this.openid}).then(res=>{
					if(res.code===0){
						uni.setStorageSync('token',res.data.token);
						if(res.data.shequ)uni.setStorageSync('shequ',res.data.shequ);
						if(res.data.communityId)uni.setStorageSync('communityId',res.data.communityId);
						uni.showToast({
							title:res.msg,
							icon:'success'
						})
						setTimeout(function(){
							uni.switchTab({
								url:'/pages/index/home'
							})
						},1200)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
					
				})
			},
			goback(){
				uni.navigateBack()
			},
			sendcode(){
				this.$post('api/sendcode',{phone:this.phone,handle:this.handle}).then(res=>{
					if(res.code===0){
						uni.showToast({
							title:res.msg,
							icon:'success'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
				})
			},
			goback(){
				uni.navigateBack()
			},
			queding(){
				uni.switchTab({
					url:'/pages/index/home'
				})
			}
		}
	}
</script>

<style lang="scss">
	.codeinput {
		width: 100%;
	
	}
	.u-code-input {
		display: flex;
		justify-content: space-between;
	}
	.login{
		margin-top: 90rpx;
		width: 100%;
		height: 100%;
		
		&-bg{
			margin-left: 20rpx;
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			z-index: -1;
		}
		
		
		
		&-content{
			width: 100%;
			box-sizing: border-box;
			
			&-header{
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				box-sizing: border-box;
				
				&-close{
					width: 30rpx;
					height: 30rpx;
				}
			}
			
			&-box{
				width: 580rpx;
				padding-top: 130rpx;
				display: flex;
				flex-direction: column;
				margin: 0 auto;
				
				&-label{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #808080;
					font-size: 24rpx;
					margin-top: 30rpx;
				}
				
				&-input{
					width: 100%;
					height: 84rpx;
					border-bottom: 1px solid #efefef;
					display: flex;
					align-items: center;
					
					>input{
						width: 100%;
						height: 100%;
					}
				}
				
				&-phone{
					font-size: 60rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 500;
					color: #000000;
					
					>text{
						color: #FE7B00;
					}
				}
				
				&-text{
					color: #999999;
					font-size: 24rpx;
					margin-top: 50rpx;
				}
				
				&-button{
					width: 100%;
					height: 88rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-weight: normal;
					background: #EEEEEE;
					color: #999999;
					margin-top: 40rpx;
				}
				
				.active{
					margin-top: 100rpx;
					color: #fff;
					background: linear-gradient(to right,#FFAE45,#FE7B00);
				}
				
				&-checkbox{
					display: flex;
					align-items: center;
					margin-top: 40rpx;
					
					image{
						width: 30rpx;
						height: 30rpx;
						margin-right: 14rpx;
					}
					
					&-text{
						color: #666666;
						font-size: 24rpx;
						flex: 1;
						line-height: 40rpx;
						
						>text{
							color: #C98E1C;
						}
					}
				}
				
				&-wechat{
					width: 100%;
					position: absolute;
					bottom: 76rpx;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #999999;
					font-size: 24rpx;
					
					text{
						color: #000000;
						
					}
				}
			}
		}
		
		
	}
</style>
